<template>
  <el-dialog
          :model-value="visible"
          title="详情"
          @close="dialogClose"
          width="40%"
  >

     <el-form :model="row" ref="formRef" :rules="formRules" label-width="100px">
        <el-form-item label="账号：" prop="username" >
          <el-input v-model="row.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色：" prop="role">
           <el-radio-group v-model="row.role" disabled>
              <el-radio border :label='1' >管理员</el-radio>
              <el-radio border :label='2' >普通用户</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="姓名：" prop="first_name">
          <el-input v-model="row.first_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
            <el-date-picker v-model="row.age" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" disabled>
            </el-date-picker>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
           <el-radio-group v-model="row.sex" disabled>
              <el-radio border :label='1' >男</el-radio>
              <el-radio border :label='2' >女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="row.email"  disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop="mobile">
          <el-input v-model="row.mobile" disabled ></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="is_active">
           <el-radio-group v-model="row.is_active" disabled>
              <el-radio border :label='1' >启用</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='0' >未启用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="加入日期：" prop="date_joined">
          <el-input v-model="row.date_joined" disabled></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
        </span>
      </template>

  </el-dialog>
</template>

<script>
    export default {
        props: {
            visible: Boolean,
            row: '',  // 当前行内容
        },
        methods: {
          dialogClose() {
            this.$emit('getData');
            this.$emit('update:visible', false)  // 当对话框关闭，通过父组件更新为false
          },
        },
        watch: {
            visible() {
                 if(this.visible) {  // 关闭窗口不请求
                     // console.log(this.row,1111)
                     //当打开窗口时，赋值is_active为数字，默认是true或false，没对应上
                     if (this.row.is_active === false) {
                         this.row.is_active = 0;
                     } else {
                         this.row.is_active = 1;
                     }
                 }
            }
        }
    }
</script>

<style scoped>
/*.el-dialog div  {*/
/*    overflow: auto;*/
/*}*/
</style>